<script setup lang="ts">
import RainComponent from '@/components/RainComponent.vue'
import { onMounted, reactive, ref } from 'vue'
import bgImg from '@/assets/bg.png'
import { loginUser, registerUser, sendEmail } from '@/api/system/common'
import { Message } from '@arco-design/web-vue'
import { useGlobalStore } from '@/stores/global'
import router from '@/router'

//粒子特效高宽
const rainCanvasSize = reactive({
  width: 0,
  height: 0
})


onMounted(() => {
  window.onresize = () => {
    rainCanvasSize.width = document.body.clientWidth
    rainCanvasSize.height = document.body.clientHeight
  }
  rainCanvasSize.width = document.body.clientWidth
  rainCanvasSize.height = document.body.clientHeight
})

//控制注册还是登录
const isRegister = ref(false)

const globalStore = useGlobalStore()
// 登录from
const loginForm = reactive({
  form: {
    username: '',
    password: ''
  },
  rules: {
    username: [{ required: true, message: '用户名或邮箱不能为空' }],
    password: [{ required: true, message: '密码不能为空' }]
  },
  submit: ({ errors, values }: any) => {
    if (errors) {
      console.log(errors)
      return
    }

    //登录请求
    loginUser(loginForm.form).then(resp => {
      //将数据存储到store中
      globalStore.login(resp.data)
      localStorage.setItem('token', resp.data.token)
      router.replace('/')
    })
  }
})
//注册表单
const registerForm = reactive({
  form: {
    age: null,
    email: null,
    nickName: null,
    password: null,
    qq: null,
    username: null,
    verifyCode: null
  },
  rules: {
    username: [{ required: true, message: '用户名或邮箱不能为空' }],
    password: [{ required: true, message: '密码不能为空' }]
  },
  submit: ({ errors, values }: any) => {
    if (errors) {
      console.log(errors)
      return
    }

    registerUser(registerForm.form)
  }
})

//发送邮件
const send = (mail: string) => {
  const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
  if (!regex.test(mail)) {
    Message.error('邮箱格式不正确')
    return
  }
  sendEmail(mail)
}

</script>
<template>
  <div class="w-full h-full overflow-hidden relative">
    <RainComponent :height="rainCanvasSize.height" :width="rainCanvasSize.width" :background-img="bgImg" :rain-len="50"
                   canvas-class-name="w-full h-full p-0 m-0 absolute left-0 top-0" />


    <div class="absolute top-2/4 right-40 rounded-xl bg-white p-4 -translate-y-1/2 "
         style="width: 550px; box-shadow: 5px 5px 30px #ccc">
      <h1 class="ps-3">{{ isRegister ? '用户注册' : 'Rocc.cc 博客管理系统' }}</h1>

      <!--   注册表单   -->
      <a-form v-if="isRegister" auto-label-width @submit="registerForm.submit" :rules="registerForm.rules"
              :model="registerForm.form">
        <a-form-item>
          <a-input v-model="registerForm.form.nickName" placeholder="用户昵称">
            <template #prefix>
              <icon-pen></icon-pen>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="registerForm.form.username" placeholder="用户名">
            <template #prefix>
              <icon-user></icon-user>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="registerForm.form.password" placeholder="密码">
            <template #prefix>
              <icon-lock></icon-lock>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="registerForm.form.qq" placeholder="QQ号">
            <template #prefix>
              <icon-qq></icon-qq>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-number v-model="registerForm.form.age" placeholder="年龄">
            <template #prefix>
              <icon-robot></icon-robot>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item>
          <a-input v-model="registerForm.form.email" placeholder="邮箱">
            <template #prefix>
              <icon-email></icon-email>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-row class="w-full" justify="space-between">
            <a-col :span="18">
              <a-input v-model="registerForm.form.verifyCode"></a-input>
            </a-col>
            <a-col :span="5" class="text-right">
              <a-button type="primary" class="w-full" @click="send(registerForm.form.email)">
                <template #icon>
                  <icon-send></icon-send>
                </template>
                发送邮件
              </a-button>
            </a-col>
          </a-row>
        </a-form-item>

        <a-form-item>
          <a-button class="w-full" size="large" type="primary" html-type="submit">
            注册用户
          </a-button>
        </a-form-item>

      </a-form>
      <!--   登录表单   -->
      <a-form v-else auto-label-width @submit="loginForm.submit" :rules="loginForm.rules" :model="loginForm.form">
        <a-form-item validate-trigger="blur" field="username" hide-asterisk>
          <a-input size="large" placeholder="用户名/邮箱" v-model="loginForm.form.username">
            <template #prefix>
              <icon-user></icon-user>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item validate-trigger="blur" field="password" hide-asterisk>
          <a-input type="password" size="large" placeholder="密码" v-model="loginForm.form.password">
            <template #prefix>
              <icon-lock></icon-lock>
            </template>
          </a-input>
        </a-form-item>
        <!--        <a-form-item>
                  <a-row>
                    <a-col :span="12">
                      <a-input />
                    </a-col>
                    <a-col :span="12">
                      <a-image></a-image>
                    </a-col>
                  </a-row>
                </a-form-item>-->
        <a-form-item>
          <a-button type="primary" class="px-10 w-full" size="large" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>


      <a-divider />
      <div class="w-full flex justify-center">
        <a-space size="large">

          <a-tooltip content="QQ登录">
            <a-button shape="circle" size="large">
              <template #icon>
                <icon-qq></icon-qq>
              </template>
            </a-button>
          </a-tooltip>

          <a-tooltip content="邮箱登录">
            <a-button shape="circle" size="large">
              <template #icon>
                <icon-email></icon-email>
              </template>
            </a-button>
          </a-tooltip>
          ...
          <a-button shape="circle" size="large" @click="isRegister = !isRegister">
            <template #icon>
              {{ isRegister ? '登录' : '注册' }}
            </template>
          </a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
</style>
